<template>
    <div class="mr-item">
        <router-link :to="/datails/ + r.id">
            <!--创建人头像-->
            <img :src="r.author.avatar_url" alt="">
            <div class="room-info">
                <!--用户名-->
                <span class="loginname">{{r.author.loginname}}</span>
                <!--最后评论时间-->
                <span class="last_reply_at">{{ gettime(r.last_reply_at)}}</span>

                <p class="room-title">
                    <!--标题-->
                    <span v-if="r.top">置顶</span>
                     <span v-if="r.good && !r.top">精华</span>
                     <span v-else-if="r.tab == 'share'" >分享</span>
                     <span v-else-if="r.tab == 'ask'" >提问</span>
                     {{r.title}}
                </p>
                <div>
                    <span class="count">
              <!--浏览人数-->
                    <i class=" icon-eye-open"></i>
                         {{r.visit_count}}
            <!--回复人数-->
                    <i class="icon-comment-alt"></i>
                         {{r.reply_count}}
                    </span>
                </div>
            </div>
            <hr>
        </router-link>
    </div>
</template>

<script>
    export default {
        props: ['r'],
        methods: {
            gettime(time) {
                time = new Date(time)
                var year = time.getFullYear()
                var month = time.getMonth() + 1
                var day = time.getDate()
                var hour = time.getHours()
                var minute = time.getMinutes()
                var second = time.getSeconds()
                month = month > 9 ? month : '0' + month
                day = day > 9 ? day : '0' + day
                hour = hour > 9 ? hour : '0' + hour
                minute = minute > 9 ? minute : '0' + minute
                second = second > 9 ? second : '0' + second
                return year + '-' + month + '-' + day + ' ' + hour + ":" + minute + ':' + second
            },
        },
   
       
    }

</script>

<style scoped>
    .mr-item {
        margin: 5px;
        padding: 10px 0 10px 0;
        /*border-bottom: solid 5px #ccc;*/
        width: 100%;
    }
    
    .mr-item img {
        width: 25px;
        height: 25px;
        border-radius: 5px;
        vertical-align: top;
    }
    
    .room-info .loginname {
        font-weight: 700;
        color: black;
        font-size: 12px;
    }
    
    .room-info {
        font-size: 14px;
        color: #1c6132;
        overflow: hidden;
        /*background:rgba(10,10,10,.5);*/
        display: inline-block;
        width: 90%;
    }
    
    .last_reply_at {
        float: right;
        font-weight: 700;
        color: black;
        font-size: 12px;
    }
    
    .room-title {
        margin: 10px 0
    }
    .room-title span{
        background: forestgreen;
        color: white;
        padding:0 3px 0 3px;
        
    }
</style>